<template>
  <div class="user-list">
    <!--    操作日志-->
    <el-card>
      <div slot="header" class="clearfix">
        <el-button style="float: right; margin-top: -5px" type="primary" @click="clearAll">
          <i class="el-icon-plus"></i> 清除
        </el-button>
      </div>

      <el-table :data="opList" stripe border fit highlight-current-row width="100%">
        <el-table-column prop="id" label="编号" ></el-table-column>
        <el-table-column prop="manner" label="请求方式"></el-table-column>
        <el-table-column prop="url" label="请求URL"></el-table-column>
        <el-table-column prop="ip" label="操作IP"></el-table-column>
        <el-table-column label="操作时间">
          <template #default="{ row }">
            {{  formatDate(row.lastLoginTime) }}
          </template>
        </el-table-column>

      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>

export default {

  data() {
    return {

      opList: [],
      currentPage: 1,
      pageSize: 10,
      total: 100,
    }
  },
  mounted() {
    this.getOpList();
  },
  methods: {
    clearAll(){
      console.log("clear")
    },

    getOpList(){
      this.opList = [{
        id:1,
        manner:"post",
        url:"http://localhost:8080/admin/login",
        ip:"127.0.0.1",
        lastLoginTime:"2025-04-19 "
      }]
    },
    // 处理分页大小变化
    handleSizeChange(size) {
      this.pageSize = size;
      this.getOpList();
    },

    // 处理当前页变化
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getOpList();
    },


    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return date.toLocaleString();
    },
  }
}
</script>

<style scoped>
.user-list {
  padding: 20px;
}

</style>

